const men=[
    {
        title: '一级办公管理',
        children: [
            {
                title: '二级请假申请',
                children: [
                    {
                        title: '三级请假记录'
                    }
                ]
            },
            {
                title: '二级出差申请'
            }
        ]

    },
    {
        title: '一级系统设置',
        children: [
            {
                title: '二级权限管理',
                children: [
                    {
                        title: "三级用户角色",
                    },
                    {
                        title: "三级菜单设置"
                    }
                ]
            }
        ]
    }
]

 interface itemType{
     title:string,
     children?:any[]
 }
//  枚举 颜色
 enum col{
    red=1,
     'skyblue',
     'yellow',
 }
//  记录层级
  let dum=0
 const Box:Element|null=document.querySelector('.box')
//  递归渲染
const menArrs=(arr:itemType[],dum:number):string=>{

    dum+=1
       const newArr=arr.map(item=>{
         return `<div >
                <p class="ps" style="background:${col[dum]}">${item.title}</p>
                ${!item.children ? '':`<div class="men">
                ${menArrs(item.children,dum)}
                </div>`}
         </div>`
       }).join('')

       return newArr
}

const btn=()=>{
    // 伪数组转数组获取所有的P
    const dis:Element[]|null=Array.from(document.querySelectorAll('.ps')) 
    // console.log(dis)
    // 循环遍历添加点击事件
    dis.forEach(item=>{
        item.addEventListener('click',(e:any)=>{
            // 判断下一个兄弟元素节点
           if(item.nextElementSibling){
            let num:string=e.target.nextElementSibling.style.display
            // 是否显示
            if(num==='block'){
                e.target.nextElementSibling.style.display='none'
            }else{
                e.target.nextElementSibling.style.display='block'
            }
           }
        })
    })
}

const render=():void=>{
    


    (Box as Element).innerHTML= menArrs(men,dum)
  
    btn()
    
}

render()


